Safari animation Bug

前言

没啥好说的，众所周知 Safari 作为新时代 IE，Bug 一大堆。

另，本人未提报此 Bug。为什么？因为它是 Safari。

实例

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}
.spin {
	transform: rotate(0deg);
	animation: spin 10s linear infinite forwards paused -2s;
}

简介

只是一个简单的被暂停的动画，但是在 Safari 上动画不会暂停在 -2s 的位置，而是 0s 的位置。

解决方案

方案一

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}
.spin {
	animation: spin 10s linear infinite forwards paused -2s;
}

更加简单但可能不适用一些情况。

方案二

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
.spin {
	animation: spin 10s linear infinite forwards paused -2s;
}

适用于更多情况，但代码可能更多。

方案三

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}
@keyframes fade-in {
	to {
		opacity: 1;
	}
}
.spin {
	transform: rotate(0deg);
	opacity: 0;
	animation: spin 10s linear infinite forwards paused -2s,
		fade-in 1s ease-out forwards;
}

增加另一个 animation-play-state 为 running 的动画。